// out: ../css/
@import './base.less';
//基本相对宽度
@vw:3.75vw;
@mainColor:#ff6699;
@otherColor:#fb7299;
// header
header{
    width: (375/@vw);
    height: (44/@vw);
    display: flex;
    z-index: 999;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;
    padding: 0 (12/@vw) 0 (18/@vw);
    position: fixed;
    top: 0;
    right: 0;
    .left{
        img{
            width: (66/@vw);
            height: (30/@vw);
        }
    }
    .right{
        width: (156/@vw);
        height: (44/@vw);
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .icon-sousuo{
            color:#3b3838;
            font-size: (22/@vw);
        }
        .btn{
            width: (72/@vw);
            height: (24/@vw);
            line-height: (24/@vw);
            text-align: center;
            background-color: @mainColor;
            color: #fff;
            font-size: (12/@vw);
            border-radius: (5/@vw);
        }
    }
}
// 分类
.category{
    width: 100%;
    height: (40/@vw);
    background-color: #fff;
    z-index: 999;
    overflow-x: auto;
    position: fixed;
    top: (44/@vw);
    left: 0;
    scrollbar-width: none;
    /* 允许水平滚动 */
    white-space: nowrap;
    // display: flex;
    border-bottom: #f1eced solid (1/@vw);
    >div:nth-child(1){
        display: inline-block;
        width: (50/@vw);
        height: (40/@vw);
        line-height: (40/@vw);
        a{
            margin: 0 auto;
            display: block;
            font-size: (14/@vw);
            line-height: (40/@vw);
            width: (28/@vw);
            color: @otherColor;
            border-bottom: @otherColor solid (2/@vw);
        }
        
    }
    >div{
        display: inline-block;
        width: (50/@vw);
        height: (40/@vw);
        line-height: (40/@vw);
        a {
            margin: 0 auto;
            display: block;
            font-size: (14/@vw);
            line-height: (40/@vw);
            width: (28/@vw);
            color: black;
            border-bottom: 0;
        }
    }
    .right-icon{
        width: (40/@vw);
        height: (22/@vw);
        position: fixed;
        right: 0;
        top: (53/@vw);
        span{
            display: block;
            text-align: center;
            background-color: #fff;
        }
        .icon-xiajiantou{
            font-size: (16/@vw);
        }
    }
}
// 内容区-卡片
.content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: (8/@vw) (12/@vw);
    margin-top: (84/@vw);
    .card{
        margin-bottom: (18/@vw);
        .pic{
            background-image: url(https://q3.itc.cn/q_70/images03/20240512/8913665b2f554631b389c8332a0150aa.jpeg);
            background-size: cover;
            position: relative;
            border-radius: (6/@vw);
            overflow: hidden;
            background-repeat: no-repeat;
            width: (172/@vw);
            height: (97/@vw);
            background-color: red;
        border: 1px solid black;
            .father{
                height: (28/@vw);
                width: (172/@vw);
                padding: 0 (8/@vw);
                position: absolute;
                bottom:0;
                display: flex;
                justify-content: space-between;
                >div{
                    line-height:(28/@vw) ;
                }
                span{
                    color: #fff;
                    font-size: (12/@vw);
                    font-weight: 400;
                    line-height:(28/@vw) ;
                }
                .icon-bofang{
                    color: #fff;
                    font-size: (14/@vw);
                    line-height: (28/@vw);
                }
                .icon-liebiao{
                    color: #fff;
                    font-size: (14/@vw);
                    line-height: (28/@vw);
                }
            }
        }
        .btm-txt{
            font-size: (12/@vw);
            color: #212121;
            margin-top: (10/@vw);
            text-overflow: ellipsis;
            width: (172/@vw);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 15px;
            animation: colorful-text 5s infinite linear;
        }
    }
    @keyframes colorful-text {
            0% {
                color: rgb(75, 16, 16);
            }

            20% {
                color: orange;
            }

            40% {
                color: rgb(62, 62, 24);
            }

            60% {
                color: green;
            }

            80% {
                color: blue;
            }

            100% {
                color: rgb(230, 19, 230);
            }
        }
}
.end-txt{
    width: 100%;
    height: (20/@vw);
    text-align: center;
    line-height:(20/@vw) ;
    font-size: (14/@vw);
    color: #999;
    margin-bottom: (20/@vw);
}
.end-footer{
    width: (375/@vw);
    height: (120/@vw);
    background-color: #f4f4f4;
    text-align: center;
    padding: (10/@vw);
    p{
        color: #9499a0;
        font-size: (12/@vw);
        line-height: (24/@vw);
    }
}
// footer
footer {
    width: (335/@vw);
    height: (44/@vw);
    background-color: @mainColor;
    padding: (8/@vw) (10/@vw);
    position: fixed;
    border-radius: (50/@vw);
    bottom: (30/@vw);
    left: (20/@vw);
    display: flex;
    align-items: center;
    justify-content: center;

    span{
        height: (16/@vw);
        width: (35/@vw);
    }
    .icon-bilibili-copy{
        color: white;
    }
    p {
        margin-left: (14/@vw);
        font-size: (14/@vw);
        color: white;
    }
}